import { memo } from 'react';
import { Image } from 'antd';
import parse, { domToReact, HTMLReactParserOptions } from 'html-react-parser';

interface Props {
  html: string;
}

const QAHtml = ({ html }: Props) => {
  const options: HTMLReactParserOptions = {
    replace: (domNode) => {
      if (domNode.type === 'tag' && domNode.name === 'img') {
        const { src, alt } = domNode.attribs;
        return <Image width={120} className="inline-block" src={src} alt={alt} />;
      }
    },
  };

  return <div className="qa-editor-qalist-cell-html text-wrap">{parse(html, options)}</div>;
};

export default memo(QAHtml);
